<div class="content">
    <div id="example_title">
        <h1>Select/Unselect</h1>
        You can select/unselect items to the sidebar during the run time. The library will automatically refresh the portion of the sidebar that
        needs rebuilding.
    </div>
    <div id="example_view"></div>
    <div id="example_code"></div>
</div>

<!--CODE-->
<div id="sidebar" style="height: 300px; width: 200px; float: left"></div>
<div style="margin-left: 220px;">
    <button class="w2ui-btn" onclick="action('select', ['level-1-2'])"> Select Level 1.2 </button>
    <button class="w2ui-btn" onclick="action('unselect', ['level-1-2'])"> Unselect Level 1.2 </button>
    <button class="w2ui-btn" onclick="action('click', ['level-1-2'])"> Emulate Click on Level 1.2 </button>
    <br>
    <div style="padding: 20px 10px">
        <label><input id="multiselect" onclick="multi()" style="position: relative; top: 2px; left: -1px" type="checkbox"> Mutliselet (2.0+)</label><br>
    </div>
</div>
<div style="clear: both"/>

<!--CODE-->
<script type="module">
import { w2sidebar } from '__W2UI_PATH__'

let sidebar = new w2sidebar({
    box: '#sidebar',
    name: 'sidebar',
    onSelect(event) {
        console.log('select', event.detail)
    },
    onUnselect(event) {
        console.log('un-select', event.detail)
    },
    nodes: [
        { id: 'level-1', text: 'Level 1', img: 'icon-folder', expanded: true, group: true,
            nodes: [
                { id: 'level-1-1', text: 'Level 1.1', icon: 'fa fa-star-o' },
                { id: 'level-1-2', text: 'Level 1.2', icon: 'fa fa-star-o' },
                { id: 'level-1-3', text: 'Level 1.3', icon: 'fa fa-star-o' }
            ]
        },
        { id: 'level-2', text: 'Level 2', img: 'icon-folder', expanded: true, group: true,
            nodes: [
                { id: 'level-2-1', text: 'Level 2.1', icon: 'fa fa-star-o' },
                { id: 'level-2-2', text: 'Level 2.2', icon: 'fa fa-star-o' },
                { id: 'level-2-3', text: 'Level 2.3', icon: 'fa fa-star-o' }
            ]
        }
    ]
})

window.action = function (method, ids) {
    sidebar[method](...ids)
}

window.multi = () => {
    sidebar.multi = !sidebar.multi
}
</script>
